'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useAuth } from '@/contexts/auth-context'
import { ProfileDashboard } from '@/components/profile/profile-dashboard'
import { LoadingState } from '@/components/ui/loading-spinner'

export default function ProfilePage() {
  const { user, loading } = useAuth()
  const router = useRouter()

  useEffect(() => {
    if (!loading && !user) {
      router.push('/login?redirect=/profile')
    }
  }, [user, loading, router])

  if (loading) {
    return <LoadingState message="加载个人信息中..." />
  }

  if (!user) {
    return <LoadingState message="跳转到登录页面..." />
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
        <div className="mb-6 sm:mb-8">
          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">个人中心</h1>
        </div>
        
        <div className="space-y-6">
          <ProfileDashboard />
        </div>
      </div>
    </div>
  )
}
